<template>
<div id="modifyPwd">
    <Modal v-model="getModifyPwdState" title="修改密码" width="400" :loading="loading" @on-ok="modifyPwdOk" @on-cancel="modifyPwdCancel">
        <Form ref="modifyPwdForm" :model="modifyPwdForm" :rules="modifyPwdRule" label-position="right" :label-width="80">
            <FormItem label="原始密码" prop="oldPwd">
                <Input v-model="modifyPwdForm.oldPwd" placeholder="请输入原密码"></Input>
            </FormItem>
            <FormItem label="新建密码" prop="newPwd">
                <Input v-model="modifyPwdForm.newPwd" placeholder="请输入新密码"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="verifyPwd">
                <Input v-model="modifyPwdForm.verifyPwd" placeholder="请确认新密码"></Input>
            </FormItem>
        </Form>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue'
//导入iview组件
import {
    Modal,
    Form,
    FormItem,
    Input,
    Message
} from 'iview'
Vue.prototype.$Message = Message; //Message的注册应该使用下面的方法

//解决axios post不能传递参数
import qs from 'qs'

export default {
    data() {
        //确认密码
        const verifyPwdFn = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请确认新密码'))
            } else if (value != this.modifyPwdForm.newPwd) {
                callback(new Error('确认密码和新密码不一致'));
            } else {
                callback();
            }
        }
        return {
            loading: true,
            modifyPwdForm: {
                oldPwd: '',
                newPwd: '',
                verifyPwd: ''
            },
            modifyPwdRule: {
                oldPwd: {
                    required: true,
                    message: '请输入您的原密码',
                    trigger: 'blur'
                },
                newPwd: [{
                    required: true,
                    message: '请输入您的新密码',
                    trigger: 'blur'
                }, {
                    min: 6,
                    message: '新密码至少6位',
                    trigger: 'blur'
                }],
                verifyPwd: [{
                    required: true,
                    validator: verifyPwdFn,
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        //修改密码提交
        modifyPwdOk() {
            setTimeout(() => {
                this.$refs['modifyPwdForm'].validate((valid) => {
                    if (valid) {
                        let _self = this;
                        //利用qs解决后台获取不到post数据
                        var obj = qs.stringify({
                            oldPassword: this.modifyPwdForm.oldPwd,
                            newPassword: this.modifyPwdForm.newPwd
                        });
                        this.$axios.post('user/updatePassword', obj).then(function(res) {
                            if (res.data.code == 200) {
                                _self.$store.state.modifyPwd.modifyPwdSta = false;
                            } else {
                                _self.$Message.error('修改密码失败，请确认后重新输入');
                            }
                        })
                    }
                })
                this.loading = false;
                this.$nextTick(() => {
                    this.loading = true;
                });
            }, 1000);
        },
        //修改密码取消
        modifyPwdCancel() {
            this.$refs['modifyPwdForm'].resetFields();
            this.$store.state.modifyPwd.modifyPwdSta = false;
        }
    },
    computed: {
        getModifyPwdState: {
            get: function() {
                return this.$store.state.modifyPwd.modifyPwdSta
            },
            set: function() {}
        }
    },
    components: {
        Modal,
        Form,
        FormItem,
        Input,
        Message
    }
}
</script>
